import React from "react";
// 路由
import { Suspense } from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import RouterLoading from "../components/RouterLoading";


// 导入路由配置
import routeList from './router_confilg'

// console.log(routeList)
// import Home from "../pages/Home";
// import CityList from "../pages/CityList";

// 递归处理 多级路由懒加载
function RouterChildren(routeArr: any) {
  // console.log(routeArr)
  return (
      routeArr.map((item, index) => {
        return <Route path={item.path} key={index} element={
          <Suspense fallback={
            // <div>路由懒加载...</div>
            <RouterLoading></RouterLoading>
          }>
            < item.component />
          </Suspense>
          
        } >
          { item.children ? RouterChildren(item.children) : ''}
        </Route>
      })
   
  )
}

// 生成 路由配置
// function RouterCom() 
export default class RouterCom extends React.Component{
  
  render() {
    return (
      <Router>
          {/* 配置路由 */}
          <Routes>
            {/* <Route path="home" element={<Home />}>
              <Route path="cityList" element={<CityList />} />
            </Route> */}
            {
              routeList.map((item, index) => {
                return <Route path={item.path} key={index} element={
                  <Suspense fallback={
                    // <div>路由懒加载...</div>
                    <RouterLoading></RouterLoading>
                  }>
                    < item.component />
                  </Suspense>
                } >
                  { item.children ? RouterChildren(item.children) : ''}
                  {/* { item.children ?
                    item.children.map((ele, y) => {
                      return <Route path={ele.path} key={y} element={
                        <Suspense fallback={
                          <div>路由懒加载...</div>
                        }>
                          < ele.component />
                        </Suspense>
                      } >
                       </Route>
                    })
                  : ''} */}
                </Route>
              })
            }
          </Routes>
      </Router>
      
    )
  }
  
}

// export default RouterCom;